<template>
	<view class="page">
		<u-navbar title="流程列表" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view v-if="!loading" style="margin-top: 20rpx;">
			<u-alert :title="title" type="warning" :closable="closable"></u-alert>
		</view>
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="2">
				<template v-if="loading">
					<view v-for="item in 15" :key="index" style="height: 88rpx;margin-top: 20rpx;" class="Skeleton">
					</view>
				</template>
				<dragSorts listHeight='100%' ref="dragSorts" :list="data" :longTouch="true" :autoScroll="true"
					:feedbackGenerator="false" :rowHeight="55" @confirm="confirm" @onclick='onclick'></dragSorts>
			</z-paging>
		</view>
		<template v-if="!loading">
			<u-button :disabled="editShow" @click='addShow=true'>
				新增
			</u-button>
			<view style="height: 20rpx;" />
			<u-button color=" #3975c6" @click='openEdit'>
				{{!editShow?'编辑':'关闭编辑'}}
			</u-button>
			<view style="height: 20rpx;" />
			<u-button type="error" @click='openDel'>
				{{!delShow?'删除':'关闭删除'}}
			</u-button>
		</template>
		<view>
			<u-modal :show="addShow" :title="editShow?'编辑流程':'新增流程'" :showCancelButton='true'
				:confirmText="editShow?'编辑':'新增'" @confirm='AddProcess' @cancel='cancel'>
				<view slot="default" style="width: 100%">
					<u-form style="width: 100%;" labelPosition="left" :model="form" ref="uForm">
						<u-form-item label="标题:" prop="title">
							<u--input :disabled="disabled" v-model="form.title" placeholder="请输入标题" />
						</u-form-item>
						<u-form-item label="描述:" prop="description">
							<u--textarea :disabled="disabled" v-model="form.description"
								placeholder="请输入描述"></u--textarea>
						</u-form-item>
					</u-form>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import dragSorts from './components/HM-dragSorts/components/HM-dragSorts/HM-dragSorts.vue'
	export default {
		components: {
			dragSorts,
		},
		data() {
			return {
				editId:null,
				editShow: false,
				data: [],
				loading: true,
				closable: true,
				title: '长按图标可拖动排序',
				delShow: false,
				addShow: false,
				disabled: false,
				form: {
					title: '',
					description: ''
				},
				rules: {
					'title': {
						type: 'any',
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'any',
						required: true,
						message: '请填写描述',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			query(page, size) {
				this.loading = true
				let obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Process.List(obj).then(res => {
					this.$refs.paging.completeByNoMore(res.data.process.map((item, index) => {
						return {
							id: item.id,
							name: item.title,
							description: item.description,
							icon: ''
						}
					}), true)
					setTimeout(() => {
						this.$refs.dragSorts.splice(0, res.data.process.length, ...res.data.process
							.map((item, index) => {
								return {
									id: item.id,
									name: item.title,
									description: item.description,
									icon: ''
								}
							}));
						this.loading = false
					}, 500)
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			confirm(e) {

				let obj = {
					process_table: "company_process",
					processes_ids: e.list.map((item, index) => {
						return {
							id: item.id,
							sort: index + 1
						}
					})
				}
				this.$api_company.Process.Sort(obj)
			},
			onclick(e) {
				if (this.delShow) {
					if (this.disabled) return
					this.disabled = true
					uni.showLoading({
						title: '删除中...'
					})
					this.$api_company.Process.Del(e.row.id).then(res => {
						uni.hideLoading()
						const length = this.data.length
						this.data = this.data.filter(item => item.id != e.row.id)
						this.$refs.dragSorts.splice(0, length, ...this.data);
						this.disabled = false
					}).catch(err => {
						uni.hideLoading()
						uni.$u.toast(err.message)
						this.disabled = false
					})
				}
				if (this.editShow) {
					const item = this.data.filter(item => item.id == e.row.id)[0]
					console.log(item)
					this.addShow = true
					this.editId=item.id
					this.form.title = item.name
					this.form.description = item.description
				}
			},
			openDel() {
				this.delShow = !this.delShow
				this.editShow = false
				if (this.delShow) {
					this.data = this.data.map(item => {
						return {
							...item,
							icon: 'https://sassimg.oss-cn-shanghai.aliyuncs.com/platform/delete.png'
						}
					})
				} else {
					this.data = this.data.map(item => {
						return {
							...item,
							icon: ''
						}
					})
				}
				this.$refs.dragSorts.splice(0, this.data.length, ...this.data);
			},
			AddProcess() {
				if (this.editShow) {
					this.$refs.uForm.validate().then(res => {
						console.log(111111111)
						if (this.disabled) return
						this.disabled = true
						uni.showLoading({
							title: '保存中...'
						})
						this.$api_company.Process.Update(this.editId,this.form).then(res => {
							uni.hideLoading()
							this.addShow = false
							this.disabled = false
							this.editShow=false
							this.$refs.paging.reload()
						}).catch(err => {
							uni.$u.toast(err.message)
							uni.hideLoading()
							this.disabled = false
						})
					}).catch(errors => {
						uni.$u.toast('请输入完整信息')
					})
				} else {
					this.$refs.uForm.validate().then(res => {
						if (this.disabled) return
						this.disabled = true
						uni.showLoading({
							title: '新增中...'
						})
						this.$api_company.Process.Add(this.form).then(res => {
							uni.hideLoading()
							this.addShow = false
							this.disabled = false
							this.$refs.paging.reload()
						}).catch(err => {
							uni.$u.toast(err.message)
							uni.hideLoading()
							this.disabled = false
						})
					}).catch(errors => {
						uni.$u.toast('请输入完整信息')
					})
				}
			},
			cancel() {
				if (this.disabled) return
				this.form.title = null
				this.form.description = null
				this.addShow = false
			},
			openEdit() {
				this.editShow = !this.editShow
				this.delShow = false
				if (this.editShow) {
					this.data = this.data.map(item => {
						return {
							...item,
							icon: 'https://decorate.oss-cn-shanghai.aliyuncs.com/platform/edit.png'
						}
					})
				} else {
					this.data = this.data.map(item => {
						return {
							...item,
							icon: ''
						}
					})
				}

				this.$refs.dragSorts.splice(0, this.data.length, ...this.data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.body {
		flex: 1;
	}

	.processItem {
		margin-top: 20rpx;
		border-radius: 8rpx;
		background-color: #ddd;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	::v-deep .color {
		border: none !important;
	}

	::v-deep .HM-drag-sort {
		border: none;
		box-shadow: 0 0 10rpx #ddd;
	}
</style>